import { observer } from 'mobx-react'
import styles from './index.module.less'
import PageLoading from '@/components/Global/PageLoading'
import { useEffect, useState } from 'react'
import { history, useParams } from 'umi'
import dayjs from 'dayjs'
import BtnBotLayout from '@/components/BtnBotLayout'
import { getData } from '@/servers/http'
import { api } from '@/servers/api'
import { resumeTypeMap } from '@/const'
import store from '../store'
import { formateMoney } from '@/utils'

export default observer(() => {
    const { barriersInfo, showSelectModal } = store || {}
    const { id, from }: any = history.location.query || {}
    const [isEnd, setIsEnd] = useState(false)

    useEffect(() => {
        if (barriersInfo.length > 0) {
            getData(api.usersLoginUserInfo).then((res: any) => {
                const { data, status } = res
                if (status !== 200) return
                setIsEnd(dayjs().isAfter(dayjs(data?.userStudent?.end_class_time).endOf('day')))
            })
            showSelectModal(id, from)
        }
    }, [barriersInfo])

    if (!Object.keys(barriersInfo).length) {
        return <PageLoading />
    }

    /** 编辑 */
    const handleEdit = () => {
        getData(api.usersLoginUserInfo).then((res: any) => {
            const { data, status } = res
            if (status !== 200) return
            const { platform_access_token, mid_domain } = data || {}
            const callbackUrl = encodeURIComponent(window.location.origin + `/#/intended/result?id=${id}`)
            window.location.href = `${mid_domain}/job-center/intended-position/index?token=${platform_access_token}&callback=${callbackUrl}&openKey=`
        })
    }
    return (
        <div className={styles.container}>
            <BtnBotLayout
                footer={
                    <div className={styles.options}>
                        {!isEnd && (
                            <div className={styles.edit_btn} onClick={handleEdit}>
                                编辑
                            </div>
                        )}
                    </div>
                }
            >
                <div className={styles.wrapper}>
                    <div className={styles.resume_state}>
                        <div className={styles.label}>当前求职状态</div>
                        <div className={styles.value}>{barriersInfo?.[0]?.joinTime}</div>
                    </div>
                    <div className={styles.border_line} />
                    <div className={styles.header}>求职意向</div>
                    <div className={styles.content}>
                        {barriersInfo.length > 0 &&
                            barriersInfo.map((item: any, index: number) => (
                                <div className={styles.resume_item} key={`${item?.code}${item?.capacityId}`}>
                                    <div className={styles.resume_title}>求职意向{index + 1}</div>
                                    <div className={styles.resume_row}>
                                        {item.capacityName}
                                        <span className={styles.dot} />
                                        {resumeTypeMap.get(Number(item.type))}
                                    </div>
                                    <div className={styles.resume_row}>
                                        {item.cityName}
                                        <span className={styles.line} />
                                        {item.industryName}
                                    </div>
                                    {Number(item.type) !== 2 && (
                                        <div className={styles.resume_row}>
                                            {formateMoney(item.minSalary)} ~ {formateMoney(item.maxSalary)}
                                        </div>
                                    )}
                                </div>
                            ))}
                    </div>
                </div>
            </BtnBotLayout>
        </div>
    )
})
